<!-- 
 * 智能匹配组件----需求
 * @author: 
 * @since: 2022-05-31
 * index.vue
-->
<template>
  <div class="demand-detail-container detailsPageBox p20">
    <div class="detailsMain">
      <div class="demand">
        <div class="title">需求方</div>
        <div class="info">
          <div class="item">
            <div class="key">需求名称：</div>
            <div class="value name" @click="goDetail(1)">{{ state.detailsData.needTitle }}</div>
          </div>
          <div class="item">
            <div class="key">需求联系人：</div>
            <div class="value">{{ state.detailsData.needContactPerson }}</div>
          </div>
          <div class="item">
            <div class="key">联系电话：</div>
            <div class="value">{{ state.detailsData.needContactPhone }}</div>
          </div>
        </div>
      </div>
      <div class="achievement">
        <div v-if="state.abutmentList">
          <div v-if="state.abutmentList.SYSTEM_LIBRARY && state.abutmentList.SYSTEM_LIBRARY.length > 0">
            <div class="title">意向对接成果</div>
            <div class="list">
              <div class="list-item" v-for="(item, index) in state.abutmentList.SYSTEM_LIBRARY" :key="index" @mouseover="enterAchievementItem(item, index, 1)" @mouseout="leaveAchievementItem(item, index, 1)">
                <div class="box">
                  <div class="item">
                    <div class="key">成果名称：</div>
                    <div class="value name" @click="goDetail(2, item)">{{ item.supplyTitle }}</div>
                  </div>
                  <div class="item">
                    <div class="key">成果联系人：</div>
                    <div class="value">{{ item.supplyContactPerson }}</div>
                  </div>
                  <div class="item">
                    <div class="key">联系电话：</div>
                    <div class="value">{{ item.supplyContactPhone }}</div>
                  </div>
                  <div class="item">
                    <div class="key">匹配度：</div>
                    <div class="value">{{ item.similar }}</div>
                  </div>
                </div>
                <div class="del" v-show="state.currentSystemIndex === index" @click="delAchievement(item)">
                  <svg-icon name="shanchu" size="16" color="#fff" class="icon"></svg-icon>
                  <span class="word">删除</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="state.abutmentList.PATENT_LIBRARY && state.abutmentList.PATENT_LIBRARY.length > 0">
            <div class="title">意向对接专利</div>
            <div class="list">
              <div class="list-item" v-for="(item, index) in state.abutmentList.PATENT_LIBRARY" :key="index" @mouseover="enterAchievementItem(item, index, 2)" @mouseout="leaveAchievementItem(item, index, 2)">
                <div class="box">
                  <div class="item">
                    <div class="key">专利名称：</div>
                    <div class="value name" @click="goDetail(3, item)">{{ item.supplyTitle }}</div>
                  </div>
                  <div class="item">
                    <div class="key">专利号：</div>
                    <div class="value">{{ item.supplyId }}</div>
                  </div>
                  <div class="item">
                    <div class="key">匹配度：</div>
                    <div class="value">{{ item.similar }}</div>
                  </div>
                </div>
                <div class="del" v-show="state.currentPatentIndex === index" @click="delAchievement(item)">
                  <svg-icon name="shanchu" size="16" color="#fff" class="icon"></svg-icon>
                  <span class="word">删除</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button size="130px" class="addBtn" @click="addMatchAchievement">+添加匹配结果</el-button>
      </div>
    </div>
    <el-dialog v-model="isShowDialog" title="添加对接结果" width="1000px" :before-close="closeDialog">
      <div class="fit" v-loading="loading">
        <div class="recommendAchievement common">
          <div class="title">推荐成果</div>
          <el-checkbox-group v-model="state.checkedAchievementList" @change="checkbox(1, $event)" v-if="state.recommendAchievement && state.recommendAchievement.length > 0">
            <el-checkbox :label="item.id" v-for="(item, index) in state.recommendAchievement" :key="index" size="mini" @change="getCheckModel(1, item)">
              <div @click="clcikText(item, $event)">{{ item.name }}</div>
            </el-checkbox>
          </el-checkbox-group>
          <div class="emptyData" v-else>暂无数据</div>
          <div class="pagination">
            <el-pagination background :currentPage="state.pagination.currentPage1" :page-size="state.pagination.size1" :total="state.pagination.total1" @size-change="handleSizeChange(1, $event)" @current-change="handleCurrentChange(1, $event)" :current-page="state.pagination.currentPage1" layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </div>
        </div>
        <div class="recommendPatent common">
          <div class="title">推荐专利</div>
          <el-checkbox-group v-model="state.checkedPatentList" @change="checkbox(2, $event)" v-if="state.recommendPatent && state.recommendPatent.length > 0">
            <el-checkbox :label="item.id" v-for="item in state.recommendPatent" :key="item" size="mini" @change="getCheckModel(2, item)">
              <div @click="clcikText(item, $event)">{{ item.name }}</div>
            </el-checkbox>
          </el-checkbox-group>
          <div class="emptyData" v-else>暂无数据</div>
          <div class="pagination">
            <el-pagination background :currentPage="state.pagination.currentPage2" :page-size="state.pagination.size2" :total="state.pagination.total2" @size-change="handleSizeChange(2, $event)" @current-change="handleCurrentChange(2, $event)" :current-page="state.pagination.currentPage2" layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="add" size="mini">确认添加</el-button>
          <el-button @click="closeDialog" size="mini">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowDetail" title="查看详情" width="1000px">
      <AchieveContent :id="state.currentId" type="" v-if="state.currentType == 1" />
      <PatentContent :id="state.currentId" v-if="state.currentType == 2" />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { sessionstorage } from '@/utils/storage.js'
import { getDetailsByIdApi, delAbutmentResultApi, matchScientificAchievementApi, addMatchApi, getPatentRecommendApi } from '@/api/interface/match.js'
import { ElMessageBox } from 'element-plus'
import { successHandle } from '@/utils/common.js'
import { useRouter } from 'vue-router';
const router = useRouter();

const state = reactive({
  currentSystemIndex: null,//当前系统
  currentPatentIndex: null,//当前专利
  fitAchievementList: [],//可能合适的成果
  checkedList: [],
  demandItem: {},//需求数据(从列表过来的数据)
  detailsData: {},
  currentDelSupplyId: '',//当前删除的对接结果id
  paramsList: [],//实际给后端传的数据
  abutmentList: {},//对接数据
  pagination: {//分页
    currentPage1: 1,
    size1: 10,
    total1: 0,
    currentPage2: 1,
    size2: 10,
    total2: 0
  },
  recommendAchievement: [],//推荐成果
  recommendPatent: [],//推荐专利
  checkedAchievementList: [],//选择成果列表
  checkedPatentList: [],//选择专利列表
  arr1: [],
  arr2: [],
  currentId: ''
})
const isShowDialog = ref(null)
const isShowDetail = ref(null)

const loading = ref(true)

onMounted(() => {
  state.demandItem = sessionstorage.get('demandItem')
  if (state.demandItem.id) {
    getDetailsById()
  }
})

//选择对接结果数据
const getCheckModel = (type, data) => {
  if (type == 1) {
    state.arr1 = handleCheckData(state.recommendAchievement, state.checkedAchievementList, data, state.arr1)
  } else {
    state.arr2 = handleCheckData(state.recommendPatent, state.checkedPatentList, data, state.arr2)
  }
}
//处理选择的数据
const handleCheckData = (arr, selectList, currentData, arr2) => {
  arr.forEach(item => {
    if (item.id === currentData.id) {
      item.isSelect = !item.isSelect
    }
  })
  selectList.forEach(id => {
    if (id == currentData.id) {
      arr2.push(currentData)
    }
  })
  arr2 = arr2.filter(item => item.isSelect)
  return arr2
}

//列表跳转去详情页面
const goDetail = (type, item) => {
  switch (type) {
    case 1:
      router.push({ name: 'NeedDetail', params: { id: state.demandItem.id, type: "detail" } })
      break;
    case 2:
      router.push({ name: 'AchieveDetail', params: { id: item.supplyId, type: "detail" } })
      break;
    case 3:
      router.push({ name: 'PatentDetail', params: { id: item.supplyId, type: "detail" } })
      break;
  }

}

//点击弹窗里面的名字查看详情
const clcikText = (item, e) => {
  e.preventDefault()
  state.currentId = item.id
  state.currentType = item.type
  isShowDetail.value = true

}
//表格中的多选
const checkbox = (type, val) => {
  type == 1 ? state.checkedAchievementList = val : state.checkedPatentList = val
}
//条数
const handleSizeChange = (type, val) => {
  type == 1 ? state.pagination.size1 = val : state.pagination.size2 = val
  matchScientificAchievement()
}

//页数
const handleCurrentChange = (type, val) => {
  type == 1 ? state.pagination.currentPage1 = val : state.pagination.currentPage2 = val
  matchScientificAchievement()

}

//获取智能匹配科技成果
const matchScientificAchievement = async () => {
  const params = {
    id: state.demandItem.id,
    ipi: state.pagination.currentPage1,
    ips: state.pagination.size1,
  }
  await matchScientificAchievementApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.recommendAchievement = data.result.map(item => ({
        ...item,
        name: item.resultTitle,
        isSelect: false,
        type: 1
      }))
      state.pagination.currentPage1 = data.pageNum
      state.pagination.pageSize1 = data.pageSize
      state.pagination.total1 = data.total
    }
  })
  const params2 = {
    id: state.demandItem.id,
    ipi: state.pagination.currentPage2,
    ips: state.pagination.size2,
  }
  await getPatentRecommendApi(params2).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.recommendPatent = data.plist.map(item => ({
        ...item,
        name: item.ttl,
        id: item.pn,
        isSelect: false,
        type: 2
      }))
      state.pagination.currentPage2 = data.pageNum
      state.pagination.pageSize2 = data.pageSize
      state.pagination.total2 = data.total
    }
  })
  loading.value = false

}

//根据id获取详情
const getDetailsById = () => {
  const params = {
    needId: state.demandItem.id
  }
  getDetailsByIdApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.detailsData = data
      state.abutmentList = data.group
    }
  })

}

//删除对接结果
const delAbutmentResult = () => {
  ElMessageBox.confirm('是否删除该数据?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      needId: state.detailsData.needId,
      supplyId: state.currentDelSupplyId
    }
    delAbutmentResultApi(params).then(res => {
      successHandle(res)
      getDetailsById()
    })
  })

}

//鼠标移入
const enterAchievementItem = (item, index, type) => {
  state.currentAchievementIndex = index
  if (type == 1) {
    state.currentSystemIndex = index
  } else {
    state.currentPatentIndex = index

  }
}

//鼠标离开
const leaveAchievementItem = (item, index, type) => {
  state.currentSystemIndex = null
  state.currentPatentIndex = null
}

//删除成果方
const delAchievement = (item) => {
  state.currentDelSupplyId = item.supplyId
  delAbutmentResult()
}

//添加匹配成果----打开弹窗
const addMatchAchievement = () => {
  isShowDialog.value = true
  matchScientificAchievement()
}

//关掉弹窗
const closeDialog = () => {
  state.checkedList = []
  isShowDialog.value = false
  state.checkedAchievementList = []
  state.checkedPatentList = []
  state.arr1 = []
  state.arr2 = []
  for (let key in state.pagination) {
    if (key.includes('currentPage')) {
      state.pagination[key] = 1

    }
    if (key.includes('size')) {
      state.pagination[key] = 10

    }
    if (key.includes('total')) {
      state.pagination[key] = 0

    }

  }
}

//确认添加
const add = () => {
  state.checkedList = [...state.arr1, ...state.arr2]
  state.checkedList = state.checkedList.map(item => ({
    matchSourceType: item.type == 1 ? 'SYSTEM_LIBRARY' : 'PATENT_LIBRARY',
    similar: item.socre,
    supplyId: item.id,
    supplyTitle: item.name
  }))
  const params = {
    needContactPerson: state.detailsData.needContactPerson,
    needContactPhone: state.detailsData.needContactPhone,
    needId: state.detailsData.needId,
    needTitle: state.detailsData.needTitle,
    needType: state.detailsData.needType,
    matchSupplyModelList: state.checkedList
  }
  addMatchApi(params).then(res => {
    successHandle(res)
    getDetailsById()
    closeDialog()
  })
}

</script>

<style lang="scss" scoped>
.demand-detail-container {
  :deep(.el-dialog__body) {
    padding: 0 20px;
  }
  .title {
    color: #333333;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .info {
    width: 300px;
    height: 140px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .item {
    font-size: 16px;
    display: flex;
    .key {
      color: #666666;
    }
    .value {
      flex: 1;
      font-weight: bold;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; // 默认不换行；
    }
    .value.name {
      color: #00a2ff;
      cursor: pointer;
    }
  }
  .addBtn {
    background: #25d390;
    color: #fff;
    border: none;
    margin-bottom: 20px;
  }
  .achievement {
    margin-top: 40px;
    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .list-item {
        width: 300px;
        height: 175px;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        margin: 0 20px 20px 0;
        position: relative;
        .box {
          width: 100%;
          height: calc(100% - 50px);
          padding: 25px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          box-sizing: border-box;
        }
        .del {
          width: 100%;
          height: 50px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 0px 0px 8px 8px;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          display: flex;
          justify-content: center;
          line-height: 51px;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 999;
          cursor: pointer;
          .icon {
            align-self: center;
          }
          .word {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .el-checkbox {
    width: calc((100% - 5px * 2) / 2);
    margin-right: 5px;
    :deep(.el-checkbox__label) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .emptyData {
    width: 100%;
    text-align: center;
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .el-pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .fit {
    box-sizing: border-box;
    .common {
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 10px;
      box-sizing: border-box;
    }
    .title {
      margin-bottom: 0;
    }
    .recommendPatent {
      margin-top: 10px;
    }
  }
}
</style>
